// // pages/order/index.js
// Page({

//   /**
//    * 页面的初始数据
//    */
//   data: {

//   },

//   /**
//    * 生命周期函数--监听页面加载
//    */
//   onLoad(options) {

//   },

//   /**
//    * 生命周期函数--监听页面初次渲染完成
//    */
//   onReady() {

//   },

//   /**
//    * 生命周期函数--监听页面显示
//    */
//   onShow() {

//   },

//   /**
//    * 生命周期函数--监听页面隐藏
//    */
//   onHide() {

//   },

//   /**
//    * 生命周期函数--监听页面卸载
//    */
//   onUnload() {

//   },

//   /**
//    * 页面相关事件处理函数--监听用户下拉动作
//    */
//   onPullDownRefresh() {

//   },

//   /**
//    * 页面上拉触底事件的处理函数
//    */
//   onReachBottom() {

//   },

//   /**
//    * 用户点击右上角分享
//    */
//   onShareAppMessage() {

//   }
// })

let curve = {
  mW: 360, //canvas宽
  mH: 250, //canvas高
  mCenter: 180, //中心点
  hCenter: 125, //中心点
  curveText: [ //x轴
    ['自主型', '(AU)'],
    ['技术型', '(TF)'],
    ['挑战型', '(CH)'],
    ['管理型', '(GM)'],
    ['服务型', '(SV)'],
    ['创造型', '(FC)'],
    ['安全型', '(SE)'],
    ['生活型', '(LS)'],
  ],
  curveColText: ['100', '80', '60', '40', '20', '0'], //y轴
  curveData: [60, 80, 48, 72, 65, 48, 72, 65],
  points: []
};
Page({
  data: {
    curve: {
      display: 'block'
    },
  },
  onLoad() {
    let curveCtx = wx.createCanvasContext('curveCanvas');
    this.drawCurve(curveCtx);
  },
  // ***************************曲线开始-职业倾向维度解析********************************
  // 曲线
  drawCurve(curveCtx) {
    const that = this;
    this.drawLineBg(curveCtx); //画横纵坐标框架
    this.drawLineColText(curve.curveColText, curveCtx); //绘制纵坐标文字
    this.drawLineRowText(curve.curveText, curveCtx); //绘制横坐标文字
    this.drawCurveCtx(curve.curveData, curveCtx); //绘制曲线
    curveCtx.draw();
  },
  drawCurveCtx(mData, lineCtx) {
    curve.points = [];
    for (let i = 0; i < 8; i++) {
      curve.points.push({
        x: 29.5 + i * 45,
        y: 200 - mData[i] / 100 * 150
      });
    }
    this.drawCurvePath(curve.points, lineCtx);
  },
  // 绘制曲线背景
  drawCurvePath(path, ctx) {
    var point = getControlPoint(path);
    ctx.beginPath();
    const grd = ctx.createLinearGradient(150, 0, 150, 200);
    grd.addColorStop(0, 'rgba(51,136,255,0.5)');
    grd.addColorStop(0.7, 'rgba(51,136,255,0.5)');
    grd.addColorStop(1, 'rgba(255,255,255,0)');
    ctx.setFillStyle(grd);
    ctx.setGlobalAlpha(0.5);
    ctx.beginPath();
    ctx.moveTo(29, 200);
    ctx.lineTo(curve.points[0].x, curve.points[0].y);
    var int = 0;
    for (var i = 0; i < curve.points.length; i++) {
      if (i == 0) {
        ctx.quadraticCurveTo(point[0].x, point[0].y, curve.points[1].x, curve.points[1].y);
        int = int + 1;
      } else if (i < curve.points.length - 2) {
        ctx.bezierCurveTo(point[int].x, point[int].y, point[int + 1].x, point[int + 1].y, curve.points[i + 1].x, curve.points[i + 1].y);
        int += 2;
      } else if (i == curve.points.length - 2) {
        ctx.quadraticCurveTo(point[point.length - 1].x, point[point.length - 1].y, curve.points[curve.points.length - 1].x, curve.points[curve.points.length - 1].y);
      }
    }
    ctx.lineTo(curve.points[curve.points.length - 1].x, 200);
    ctx.fill();
    ctx.closePath();
    this.drawCurveSign(point, ctx)
  },
  // 绘制点加线
  drawCurveSign(point, ctx) {
    // 绘制线
    ctx.beginPath();
    ctx.setStrokeStyle("#3388FF");
    ctx.setGlobalAlpha(1);
    ctx.setLineWidth(1.5);
    var int = 0;
    ctx.moveTo(curve.points[0].x, curve.points[0].y);
    for (var i = 0; i < curve.points.length; i++) {
      if (i == 0) {
        ctx.quadraticCurveTo(point[0].x, point[0].y, curve.points[1].x, curve.points[1].y);
        int = int + 1;
      } else if (i < curve.points.length - 2) {
        ctx.bezierCurveTo(point[int].x, point[int].y, point[int + 1].x, point[int + 1].y, curve.points[i + 1].x, curve.points[i + 1].y);
        int += 2;
      } else if (i == curve.points.length - 2) {
        ctx.quadraticCurveTo(point[point.length - 1].x, point[point.length - 1].y, curve.points[curve.points.length - 1].x, curve.points[curve.points.length - 1].y);
      }
    }
    ctx.stroke();
    // 绘制点
    ctx.beginPath();
    ctx.setGlobalAlpha(1);
    for (let i = 0; i < curve.points.length; i++) {
      ctx.beginPath();
      ctx.arc(curve.points[i].x, curve.points[i].y, 5, 0, 2 * Math.PI);
      ctx.setFillStyle("#3388FF");
      ctx.fill();
      ctx.closePath();
    }
  },
  // 画横坐标
  drawLineBg(lineCtx) {
    lineCtx.setStrokeStyle("#eeeeee");
    for (let i = 0; i < 6; i++) {
      lineCtx.moveTo(curve.mCenter - 160, 50 + 30 * i);
      lineCtx.lineTo(curve.mCenter + 160, 50 + 30 * i);
      lineCtx.stroke();
    }
  },
  // 绘制横坐标文字
  drawLineRowText(mData, lineCtx) {
    lineCtx.setFillStyle("#555555");
    lineCtx.setFontSize(12); //设置字体
    for (let i = 0; i < 8; i++) {
      lineCtx.fillText(mData[i][0], 10 + i * 45, 220);
      lineCtx.fillText(mData[i][1], 15 + i * 45, 235);
    }
  },
  // 绘制纵坐标文字
  drawLineColText(mData, lineCtx) {
    lineCtx.beginPath();
    lineCtx.setFillStyle("#999999");
    for (let i = 0; i < 6; i++) {
      lineCtx.fillText(mData[i], 10, 55 + 30 * i);
    }
  },
});
// 折线变曲线
let Vector2 = function(x, y) {
  this.x = x;
  this.y = y;
};
Vector2.prototype = {
  "length": function() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  },
  "normalize": function() {
    let inv = 1 / this.length() == Infinity ? 0 : 1 / this.length();
    return new Vector2(this.x * inv, this.y * inv);
  },
  "add": function(v) {
    return new Vector2(this.x + v.x, this.y + v.y);
  },
  "multiply": function(f) {
    return new Vector2(this.x * f, this.y * f);
  },
  "dot": function(v) {
    return this.x * v.x + this.y * v.y;
  },
  "angle": function(v) {
    return Math.acos(this.dot(v) / (this.length() * v.length())) * 180 / Math.PI;
  }
};

function getControlPoint(path) {
  let rt = 0.3;
  let count = path.length - 2;
  let arr = [];
  for (let i = 0; i < count; i++) {
    let a = path[i];
    let b = path[i + 1];
    let c = path[i + 2];
    let v1 = new Vector2(a.x - b.x, a.y - b.y);
    let v2 = new Vector2(c.x - b.x, c.y - b.y);
    let v1Len = v1.length();
    let v2Len = v2.length();
    let centerV = v1.normalize().add(v2.normalize()).normalize();
    let ncp1 = new Vector2(centerV.y, centerV.x * -1);
    let ncp2 = new Vector2(centerV.y * -1, centerV.x);
    if (ncp1.angle(v1) < 90) {
      let p1 = ncp1.multiply(v1Len * rt).add(b);
      let p2 = ncp2.multiply(v2Len * rt).add(b);
      arr.push(p1, p2);
    } else {
      let p1 = ncp1.multiply(v2Len * rt).add(b);
      let p2 = ncp2.multiply(v1Len * rt).add(b);
      arr.push(p2, p1);
    }
  }
  return arr;
};
